//webpack 是基于node构建的，所以webpack的配置文件中，可以使用任何合法的node代码
const path = require('path')
// 昨天讲了  关于 devServer 的配置项，也可以在这个文件找那个配置
// 
const htmlWebpackPlugin = require('html-webpack-plugin')
const vueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: path.join(__dirname, 'src', 'main.js'),
  output: {
    path: path.join(__dirname, 'dist'), // 输出路径
    filename: 'bundle.js'
  },
  plugins: [ //  包含所有webpack 插件
    new htmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'), //模板文件路径
      filename: 'index.html'
    }),
    new vueLoaderPlugin()

  ],
  mode: 'development',
  module: { // 配置所有第三方模块的
    rules: [ // 配置所有 非 js类型文件的处理规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /.(jpg|gif|bmp|png|jpeg)$/, use: 'url-loader?limit=12289&name=[hash:8]--[name].[ext]' }, // 处理背景图片 url的 loader
      // limit 给定值  单位是 byte，如果想我们引用的图片 大于或者等于 限定值，则不会被转base64,反之则转
      // name属性 设定  生成图片的 名称规则
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 用于处理 字体文件的loader
      // { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
      { test: /\.vue$/, use: 'vue-loader' },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'stage-0'],
            plugins: [
              'transform-runtime',
              [
                'component', [{
                  'libraryName': 'mint-ui',
                  'style': true
                }]
              ],
            ]
          }
        }
      }
    ]

  },
  resolve: {
    alias: { // 修改 vue导入的时候的路径
      // 'vue$': 'vue/dist/vue.min.js'
    }
  }
}